<template>
  <div>
    <r-search
      :searchForm="searchForm"
      :searchHandle="searchHandle"
      :searchData="searchData"
    />
    <!-- :isIndex="true" -->
    <r-table
      :isSelection="false"
      :isPagination="true"
      :tableData="tableData"
      :tableCols="tableCols"
      :tablePage="tablePage"
      @refresh="init()"
    ></r-table>
    <!-- <r-form :formRules="formRules" :formHandle="formHandle" :formData="formData" :formCols="formCols" ref="elForm" labelWidth="100px" dialogWidth="500px" :isHandle="true" /> -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchData: {
        id: "",
        nickName: "",
        phone: "",
        state: ""
      },
      searchForm: [
        {
          type: "input",
          prop: "id",
          placeholder: "反馈单号",
          width: 150
        },
        {
          type: "input",
          prop: "nickName",
          placeholder: "Username",
          width: 130
        },
        {
          type: "input",
          prop: "phone",
          placeholder: "Phone码",
          width: 140
        },
        {
          type: "select",
          prop: "state",
          placeholder: "处理结果",
          width: 150,
          options: [
            {
              label: "已处理",
              value: "1"
            },
            {
              label: "未处理",
              value: "2"
            }
          ]
        }
      ],
      searchHandle: [
        {
          label: "Search",
          type: "success",
          icon: "el-icon-search",
          handle: e => this.elFormSubmit()
        },
        {
          label: "Reset",
          icon: "el-icon-refresh-right",
          handle: e => this.searchFromReset()
        }
      ],
      tableData: [],
      tableCols: [
        {
          label: "反馈单号",
          prop: "id"
          // theme: e => e.status ? 'primary' : 'danger', type: "tag",
        },
        {
          label: "Username",
          prop: "nickName"
        },
        {
          label: "Phone码",
          prop: "phone"
        },
        {
          label: "图片数量",
          prop: "pictureCount"
        },
        {
          label: "处理结果",
          prop: "state",
          theme: e => (e.state == 1 ? "primary" : "danger"),
          type: "tag",
          formatter: e =>
            e.state == 1
              ? "已处理"
              : e.state == 2
              ? "未处理"
              : e.state == 3
              ? "已指派"
              : ""
        },
        {
          label: "处理时间",
          prop: "updatedTime"
        },
        {
          label: "Operations",
          type: "button",
          btnList: [
            {
              label: "Details",
              type: "primary",
              isShow: e => (e.state == "未处理" ? false : true),
              handle: e => this.goHandle(e)
            },
            {
              label: "处理",
              type: "success",
              isShow: e => (e.state == "未处理" ? true : false),
              handle: e => this.goHandle(e)
            }
          ]
        }
      ],
      tablePage: { limit: 10, page: 1, total: 0 }
    };
  },
  components: {},
  computed: {},
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      let param = { ...this.searchData, ...this.tablePage };
      // console.log(this.tablePage);
      let res = await this.api.feedbackList(param);
      if (res) {
        this.tableData = res.data.list;
        this.tablePage.total = res.data.total;
      }
    },
    elFormSubmit(e) {
      //查询
      this.init();
    },
    goHandle(e) {
      if (e.state == 1 || e.state == 2) {
        this.$router.push({
          path: "/saleServe-userServeHandle",
          query: { id: e.id }
        });
      }
    }
  }
};
</script>
<style scoped lang="scss">
.el-icon-search {
  margin-right: 10px;
}
</style>
